<template>
    <FilmListTopNav :class="fixed ? 'fixed' : ''"></FilmListTopNav>
    <router-view></router-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import FilmListTopNav from '../components/FilmListTopNav.vue'
const fixed = ref<boolean>(false)

onMounted(() => {
    window.addEventListener('scroll', () => {
        let top = document.documentElement.scrollTop;
        if (top > 100) {
            fixed.value = true;
        } else {
            fixed.value = false;
        }
    })
})

</script>

<style scoped>
.fixed {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
}
</style>